<template>
  <div class="wrapper">
    <div class="header">
      <a-form-model layout="inline" :model="searchForm" @submit.native.prevent>
        <a-form-model-item label="模型名称">
          <a-input v-model="searchForm.name" placeholder="输入模型名称"> </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button class="border-radius-4" type="primary" icon="search" @click="pageModels"> 搜索 </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="body">
      <a-table :columns="columns" size="middle" :data-source="data" class="custom-table">
        <span slot="action" slot-scope="text, record">
          <a-button type="link" class="px-0" @click="handleConfig(record)"> 配置 </a-button>
        </span>
      </a-table>
    </div>

    <edit-modal ref="editModal" @save-config="updateConfigParams" />
  </div>
</template>

<script>
import { listModels } from '../../../api/model'
import { formatTime } from '../../../utils/util'
import notification from 'ant-design-vue/es/notification'
import EditModal from './edit.vue'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 80,
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '模型名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '参数',
    dataIndex: 'labels',
    key: 'labels',
    width: 200,
    ellipsis: true,
    customRender: (text) => {
      return {
        children: text,
        attrs: {
          title: text
        }
      }
    }
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'ModalConfig',
  components: {
    EditModal,
  },
  data() {
    return {
      data: [],
      columns,
      searchForm: {
        name: '',
      },
      configParams: [],
      currentRecord: null,
    }
  },
  methods: {
    pageModels() {
      let requestResult = []
      listModels({ name: this.searchForm.name }).then((result) => {
        result.registered_models &&
          result.registered_models.forEach((item) => {
            let singleData = {
              key: item.name,
              name: item.name,
              labels:
                item.tags == undefined
                  ? []
                  : (() => item.tags.map((tagItem) => `${tagItem.key}:${tagItem.value}`).join(' '))(),
              createTime: formatTime(new Date(item.creation_timestamp)),
              updateTime: formatTime(new Date(item.creation_timestamp)),
            }
            requestResult.push(singleData)
          })
        this.data = requestResult
      })
    },
    handleConfig(record) {
      this.currentRecord = record
      this.$nextTick(() => {
        if (this.$refs.editModal) {
          let configParams = []
          
          // 检查 labels 是否存在且为字符串类型
          if (record.labels && typeof record.labels === 'string') {
            configParams = record.labels.split(' ').map(label => {
              const [key, value] = label.split(':')
              return { key, value, isEditing: false }
            })
          } else if (Array.isArray(record.labels)) {
            // 如果 labels 是数组类型
            configParams = record.labels.map(label => {
              if (typeof label === 'string') {
                const [key, value] = label.split(':')
                return { key, value, isEditing: false }
              }
              // 如果 label 已经是对象格式
              return { 
                key: label.key || '',
                value: label.value || '',
                isEditing: false 
              }
            })
          }
          
          this.$refs.editModal.configParams = configParams
          this.$refs.editModal.isModalVisible = true
        }
      })
    },
    updateConfigParams(newParams) {
      if (this.currentRecord) {
        this.data = this.data.map((item) =>
          item.key === this.currentRecord.key 
            ? { ...item, labels: newParams } 
            : item
        )
        
        notification.success({
          message: '更新成功',
          description: '参数配置已更新'
        })
      }
    },
  },
  mounted() {
    this.pageModels()
  },
}
</script>

<style lang="less" scoped>
@import '../index.less';
</style>
